<template>
    <div class='richtext-div'>
        <div class='content' contenteditable>
            <span>文本1</span>
        </div>
        <!--按钮组-->
        <div class='button-group'>
            <button id='change_color'>背景颜色</button>
            <button id='font_size'>字体</button>
            <button id='get_selection'>所选文本</button>
        </div>
    </div>
</template>

<script>
/*原生自定义富文本*/
export default {
    data(){
        return {

        }
    },
    mounted(){
        $('#change_color').click(function(e){
            e.stopPropagation();
            document.execCommand('backcolor', false, '#FF0000');
        });
        $('#font_size').click(function(e){
            e.stopPropagation();
            document.execCommand('fontsize', false, 7);
        });
        $('#get_selection').click(function(e){
            e.stopPropagation();
            var selection = document.getSelection();  //选区对象
            var selecTxt = selection.toString();
            console.log(selecTxt);  //得到所选文本
            var range = selection.getRangeAt(0);  //取得代表选区的范围·
            //给选区文本外部添加元素
            var waibuEle = $("<span style='color:yellow; font-size:20px;text-shadow:0 0 5px #000;'></span>").get(0);
            range.surroundContents(waibuEle);
        });
    }
}
</script>

<style scoped>
.richtext-div{
    height: 300px;
    border: 1px solid green;
    position: relative;
    .button-group{
        position: absolute;
        bottom: 0;
        height: 30px;
    }
}
</style>